<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0518-JS作业-螺旋</title>
	<style type="text/css">
		html{font-family: "Microsoft YaHei";}
		body,ul{margin: 0;}
		ul{padding: 0;list-style:none;}
		.wrap{
			position: relative;
			margin: 30px auto;
			width: 426px;
			height: 204px;
			background-color: #ccc;
		}
		.l-box{
			width: 100px;
		}
		.l-box ul li{
			width: 100px;
			height: 51px;
			background-color: #000;
			border-bottom: 1px solid #fff;
			font-size: 16px;
			color: #fff;
			line-height: 51px;
			text-align: center;
			cursor: pointer;
			box-sizing: border-box;
		}
		.l-box ul li:nth-child(4){
			border-bottom: 0;
		}
		.l-box ul li:hover{
			 background-color: #f60;
		 }
		.l-box ul .on{
			background-color: #f60;
			cursor: default;
		}
		.r-box{
			position: absolute;
			top: 0;
			right: 0;
			width: 326px;
			height: 204px;
		}
		.b-box{
			display: none;
			position: absolute;
			width: 326px;
			height: 204px;
		}
		.b-box .pic li{
			display: none;
			position: absolute;
			top: 0;
		}
		.b-box .pic .show{
			display: block;
		}
		.b-box .pic li img{
			width: 326px;
			height: 204px;
			vertical-align: middle;
		}
		.b-box .btn{
			position: absolute;
			bottom: 0;
			width: 326px;
			height: 35px;
			background-color: rgba(0,0,0,.5);
			font-size: 0;
			text-align: right;
		}
		.b-box .btn li{
			display: inline-block;
			margin-left: 3px;
			width: 35px;
			height: 35px;
			background-color: rgba(0,0,0,.5);
			font-size: 16px;
			color: #fff;
			line-height: 35px;
			text-align: center;
			cursor: pointer;
		}
		.b-box .btn .on{
			background-color: rgba(255,102,0,.8);
			cursor: default;
		}
		.b-box .btn li:hover{
			background-color: rgba(255,102,0,.8);
		}
	</style>
</head>
<body>
<section class="wrap">
	<section class="l-box">
		<ul>
			<li class="on">豪华座驾</li>
			<li>美食佳肴</li>
			<li>美女风景</li>
			<li>可爱萌宠</li>
		</ul>
	</section>
	<section class="r-box">
		<!--轮播盒子1 车-->
		<div class="b-box" style="display: block;">
			<ul class="pic">
				<li class="show"><img src="images/1.jpg" alt="图片"></li>
				<li><img src="images/2.jpg" alt="图片"></li>
				<li><img src="images/3.jpg" alt="图片"></li>
				<li><img src="images/4.jpg" alt="图片"></li>
			</ul>
			<ul class="btn">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<!--轮播盒子2 美食-->
		<div class="b-box">
			<ul class="pic">
				<li><img src="images/m1.jpg" alt="图片"></li>
				<li><img src="images/m2.jpg" alt="图片"></li>
				<li><img src="images/m3.jpg" alt="图片"></li>
				<li><img src="images/m4.jpg" alt="图片"></li>
				<li><img src="images/m5.jpg" alt="图片"></li>
			</ul>
			<ul class="btn">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
		<!--轮播盒子3 风景-->
		<div class="b-box">
			<ul class="pic">
				<li><img src="images/s1.jpg" alt="图片"></li>
				<li><img src="images/s2.jpg" alt="图片"></li>
				<li><img src="images/s3.jpg" alt="图片"></li>
				<li><img src="images/s4.jpg" alt="图片"></li>
				<li><img src="images/s5.jpg" alt="图片"></li>
			</ul>
			<ul class="btn">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
		<!--轮播盒子4 动物-->
		<div class="b-box">
			<ul class="pic">
				<li><img src="images/g1.jpg" alt="图片"></li>
				<li><img src="images/g2.jpg" alt="图片"></li>
				<li><img src="images/g3.jpg" alt="图片"></li>
				<li><img src="images/g4.jpg" alt="图片"></li>
			</ul>
			<ul class="btn">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</section>
</section>
</body>
<script>
	var oLbox = document.getElementsByClassName('l-box')[0],
		oLtab = oLbox.getElementsByTagName('li'),//获取左侧按钮
        oLtabL = oLtab.length,//左侧按钮个数
		oRbox = document.getElementsByClassName('r-box')[0],
		oBbox = oRbox.getElementsByClassName('b-box');//获取右侧轮播盒子
		
	var oPicN = 0,//获取初始状态时右侧第一套图片和按钮
	    oPic = oBbox[oPicN].getElementsByClassName('pic')[0].getElementsByTagName('li'),
	    oPicL = oPic.length,//获取右侧图片个数
	    oBtn = oBbox[oPicN].getElementsByClassName('btn')[0].getElementsByTagName('li');
    
    // 初始状态时 右侧第一套轮播图按钮点击事件
    for(var j=0;j<oPicL;j++){
        oBtn[j].num = j;
        oBtn[j].onclick = function(){
		    for(var j=0;j<oPicL;j++){
			    oPic[j].className = '';
			    oBtn[j].className = '';
		    }
            oPic[this.num].className = 'show';
            oBtn[this.num].className = 'on';
		}
    }
	
	for(var i=0;i<oLtabL;i++){
	    oLtab[i].num = i;//左侧按钮点击
        oLtab[i].onclick = function(){
            for(var i=0;i<oLtabL;i++){
                oLtab[i].className = '';
                oBbox[i].style = '';
            }
            oLtab[this.num].className = 'on';
            oBbox[this.num].style = 'display: block;';
            oPicN = this.num;//获取左侧按钮点击后 所对应的右侧图片盒子的索引数值
            
            //当左侧按钮点击时 选中左侧按钮所对应的右侧图片和按钮
            oPic = oBbox[oPicN].getElementsByClassName('pic')[0].getElementsByTagName('li');
            oPicL = oPic.length;//获取右侧图片个数
            oBtn = oBbox[oPicN].getElementsByClassName('btn')[0].getElementsByTagName('li');
            
            //每次点击左侧按钮时 重置右侧按钮至1号图片和1号按钮
            for(var j=0;j<oPicL;j++){
                oPic[j].className = '';
                oBtn[j].className = '';
            }
            oPic[0].className = 'show';
            oBtn[0].className = 'on';

            //左侧按钮点击后所对应的右侧按钮点击事件
            for (var j=0; j<oPicL; j++) {
                oBtn[j].num = j;
                oBtn[j].onclick = function () {
                    for (var j=0; j<oPicL; j++) {
                        oPic[j].className = '';
                        oBtn[j].className = '';
                    }
                    oPic[this.num].className = 'show';
                    oBtn[this.num].className = 'on';
                }
            }
        }
	}
	function fnPBempty(){
	    for (var j=0; j<oPicL; j++) {
	        oPic[j].className = '';
	        oBtn[j].className = '';
	    }
    }
		
</script>
</html>